<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="../../resources/css/app.css" type="text/css" />
    <title>AIOS Visualization</title>
  	<script type="text/javascript" src="../../resources/js/sencha-touch-all-debug.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataStores.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataTables.js" charset="utf-8"></script>
				
	<script type="text/javascript"> var d_i=0; var c_i=0; var m_i=0; var y_i=0; var i=0; var targetMonth=new Date(),compareMonth = "", tID = 0;</script>
	<script>
			
	
			Ext.application({
			name: 'AIOS',
			requires: [
			          	'Ext.data.Store',
			          	'Ext.dataview.List',
			      		'Ext.Toolbar',
			           	'Ext.chart.Chart', 
					   	'Ext.chart.interactions.PanZoom',
						'Ext.chart.series.*', 
						'Ext.chart.axis.*', 
						'Ext.chart.*',
						'Ext.TitleBar',
						'Ext.draw.Component',
						'Ext.chart.CartesianChart',
						'Ext.Viewport.*'
			           
			       ],
			launch: function() {
				
					Ext.create("Ext.tab.Panel", {
					fullscreen: true,
					activeItem: 3,
					tabBarPosition: 'bottom',

					items: [
					        
//************************************** Disabled **************************************************************************				        

		 					{
							    title: ' ',
							    styleHtmlContent: true,
							    scrollable: true,
							    
							    listeners: {
							    	activate: function() {
							    		this.setHidden(true);
									}
								},
							 }, 
					        
//************************************** Present View **************************************************************************				        
					    
				            {
				                title: '現在値',
				              	iconCls: 'now',
				                styleHtmlContent: true,
				                scrollable: true,
				                listeners: {
				                	activate: function() {
										document.location.href = "currentView.html"
									}
								},
					 	    },
				 		    		
//***************************************** Day View *********************************************************				                
				                
				            {
				                title: '日',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
								
								listeners: {
									activate: function() {
										document.location.href = "dayView.html"
									
									}
								},
				            },
				            
// ******************************************** Month View *************************************************************				            
				            
				            {
				                title: '月',
				                pressed : true,
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										Ext.getCmp('targeMonthPicker').setValue(targetMonth);
										Ext.getCmp('ComapreMonthPicker').setValue(compareMonth);
										
										 /* Ext.data.JsonP.request({
												url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id='+tID+'&report_type=1&date_start='+targetMonth.getFullYear()+'-'+(targetMonth.getMonth()+1)+'-1&date_end='+targetMonth.getFullYear()+'-'+(targetMonth.getMonth()+1)+'-28',
												type: 'GET',
												crossDomain: true,
												dataType: "json",
												callbackkey: 'callback',
												scope: this,
		
												callback: function (response, value, request) {
													storeTargetDayData(value);
											    },
											    

												failure: function (response, request) {
													Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
												}
											});  */
										 
											Ext.data.JsonP.request({
												url: 'http://153.121.40.23:8080/aios-api/aios/api/GetTapGroup.php',
												method: 'POST',
												callbackkey: 'callback',
												params: {
													tap_id: 1
												},

												scope: this,      /// fix handler scope

												callback: function (response, value, request) {
													StoreTapList(value);
													
												},

												failure: function (response, request) {
													Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
												}
											});
										
									}
								},

				            items: [
				                    
		////////////////////////////// Header /////////////////////////////             
				                    {
				 		       			xtype : 'titlebar',
				 		       			docked : 'top',
				 		       			title : '月',
				 		       			items : [
				 		       			{
				 		       				xtype : 'button',
				 		       				align : 'right',
				 		       				ui : 'round',
				 		       				iconCls: 'home',
				 		       				text : 'ホーム',
				 		       				 handler: function(){
				 		       			            document.location.href = "../../index.html";         
				 		       			        }
				 		       				
				 		       			},   
				 		       			{
				 		       				xtype: 'selectfield',
				 		       				id : 'tapGroup',
				 		       				name: 'options',
				 		       				store : storeTap,
				 		       				displayField: 'tapGroupName',
				 		       		 		valueField: 'tapGroupID',
					 		       		 	listeners: {
					 	 	       		 	change: function (select, newValue, oldValue) {
					 		       		 				tID = Ext.getCmp('tapGroup').getValue();
					 		       		 				
					 		       		 			Ext.data.JsonP.request({
														url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id='+tID+'&report_type=1&date_start='+targetMonth.getFullYear()+'-'+(targetMonth.getMonth()+1)+'-1&date_end='+targetMonth.getFullYear()+'-'+(targetMonth.getMonth()+1)+'-28',
														type: 'GET',
														crossDomain: true,
														dataType: "json",
														callbackkey: 'callback',
														scope: this,
				
														callback: function (response, value, request) {
															storeTargetDayData(value);
													    },
													    

														failure: function (response, request) {
															Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
														}
													}); 
					 		       		 			
					 		       		 			if(Ext.getCmp('ComapreMonthPicker').getValue() != null){
							 		       		 			Ext.data.JsonP.request({
																url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id='+tID+'&report_type=1&date_start='+compareMonth.getFullYear()+'-'+(compareMonth.getMonth()+1)+'-1&date_end='+compareMonth.getFullYear()+'-'+(compareMonth.getMonth()+1)+'-28',
																type: 'GET',
																crossDomain: true,
																dataType: "json",
																callbackkey: 'callback',
																scope: this,
						
																callback: function (response, value, request) {
																	storeCompareDayData(value);
															    },
															    
		
																failure: function (response, request) {
																	Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
																}
															});
					 		       		 			}
					 		       		 				
								 		       		} 
				 		       				}
				 		       			}
				 		       			]
				 		            },
				 		            
				 		    		
				 		   		////////////////// Target and Compare date selector////////////////		 		    		
				 		    		
				 	                {
				 		    			
				 		    			xtype: 'fieldset',
				 		    			bodyStyle: "background-color: #C0C0C0;",
				 		    		 	layout: {
				 		    	            type: 'hbox',
				 		    	            pack: 'start', 
				 		    	            align: 'left'
				 		    	        },
				 		    	        
				 		    			items: [
				 		    			        {
													xtype: 'fieldset',
													bodyStyle: "background-color: #C0C0C0;",
												 	layout: {
											        type: 'vbox',
											        pack: 'start', 
											        align: 'left'
										     },
										     
												items: [
								 		    			{
								 		    	               xtype: 'datepickerfield',
								 		    	               id: 'targeMonthPicker',
								 		    	               destroyPickerOnHide: true,
								 		    	                label: '対象月',
								 		    	                name: 'targetDate',
								 		    	                dateFormat :"Y/m",
								 		    	                value: new Date(),
								 		    	              	picker: {
								 		    	              		yearFrom : new Date().getFullYear()-1,
								 		    	              		slotOrder:["year", "month"],
								 		    	              		
								 		    	              		 listeners: {
								 		    	                       show: function(component, eOpts) {
								 		    	                           var date = this.getValue();
								 		    	                           if (!date || isDateInPast(date)) {
								 		    	                               this.setValue(new Date());
								 		    	                           }
								 		    	                       },
								 		    	                       
								 		    	                      change: function(picker, value) {
								 		    	                    	  
								 		    	                    	  targetMonth = value;
								 		    	                    	  
								 		    	                    	 Ext.data.JsonP.request({
																				url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id='+tID+'&report_type=1&date_start='+targetMonth.getFullYear()+'-'+(targetMonth.getMonth()+1)+'-1&date_end='+targetMonth.getFullYear()+'-'+(targetMonth.getMonth()+1)+'-28',
																				type: 'GET',
																				crossDomain: true,
																				dataType: "json",
																				callbackkey: 'callback',
																				scope: this,
																				/* params: {
																					tap_id: 1
																				}, */
																				scope: this,      /// fix handler scope
										
																				callback: function (response, value, request) {
																					storeTargetDayData(value);
																			    },
																			    

																				failure: function (response, request) {
																					Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
																				}
																			}); 

								 		    	                    	  
										 		    	                 } 
								 		    	                       
								 		    	                   }, 
								 		    	              	}
								 		    			},
								 		    			        
								 		    			{
								 		    				xtype: 'fieldset',
								 		    				bodyStyle: "background-color: #C0C0C0;",
								 		    			 	layout: {
								 		    	                type: 'vbox',
								 		    	                pack: 'start', 
								 		    	               align: 'middle'
								 		                },
								 		    			items: [
								 		    			{
								 		    					xtype: 'textfield',
								 		    					id: 'monthTargetTotal',
								 		    					label: '累積電力量',
								 		    					readOnly: true,
								 		    					value: '3124'
								 		    				}, {
								 		    					xtype: 'textfield',
								 		    					id: 'monthTargetMax',
								 		    					label: '最大電力',
								 		    					readOnly: true,
								 		    					value: '192'
								 		    			}]
								 		    			
								 		    		}]}, {
								 						
								 						xtype : 'spacer'
								 					},
				 		    		
				 		    		{

										xtype: 'fieldset',
										bodyStyle: "background-color: #C0C0C0;",
									 	layout: {
								        type: 'vbox',
								        pack: 'start', 
								        align: 'left'
							     },
							     
									items: [
					 		    			{
					 		    				xtype: 'datepickerfield',
					 		    				id: 'ComapreMonthPicker',
					 		    	               destroyPickerOnHide: true,
					 		    	                label: '比較月',
					 		    	                name: 'targetDate',
					 		    	                dateFormat :"Y/m",
					 		    	                value: new Date(),
					 		    	              	picker: {
					 		    	              		yearFrom : new Date().getFullYear()-1,
					 		    	              		slotOrder:["year", "month"],
					 		    	              		
					 		    	              		 listeners: {
					 		    	                       show: function(component, eOpts) {
					 		    	                           var date = this.getValue();
					 		    	                           if (!date || isDateInPast(date)) {
					 		    	                               this.setValue(new Date());
					 		    	                           }
					 		    	                       },
					 		    	                       
					 		    	                      change: function(picker, value) {
					 		    	                    	  
					 		    	                    	  compareMonth=value;

					 		    	                    	 Ext.data.JsonP.request({
																	url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id='+tID+'&report_type=1&date_start='+compareMonth.getFullYear()+'-'+(compareMonth.getMonth()+1)+'-1&date_end='+compareMonth.getFullYear()+'-'+(compareMonth.getMonth()+1)+'-28',
																	type: 'GET',
																	crossDomain: true,
																	dataType: "json",
																	callbackkey: 'callback',
																	scope: this,
																	/* params: {
																		tap_id: 1
																	}, */
																	scope: this,      /// fix handler scope
							
																	callback: function (response, value, request) {
																		storeCompareDayData(value);
																    },
																    

																	failure: function (response, request) {
																		Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
																	}
																}); 
					 		    	                      } 
					 		    	                       
					 		    	                   }, 
					 		    	              	}
					 		    		},
					 		    			        
						 		    	{
						 		    				xtype: 'fieldset',
						 		    				bodyStyle: "background-color: #C0C0C0;",
						 		    			 	layout: {
						 		    	                type: 'vbox',
						 		    	                pack: 'start', 
						 		    	               align: 'middle'
						 		                },
						 		    			items: [
						 		    			{
						 		    					xtype: 'textfield',
						 		    					id: 'monthCompareTotal',
						 		    					label: '累積電力量',
						 		    					readOnly: true,
						 		    					value: ''
						 		    				}, {
						 		    					xtype: 'textfield',
						 		    					id: 'monthCompareMax',
						 		    					label: '最大電力',
						 		    					readOnly: true,
						 		    					value: ''
						 		    			}]
						 		    			
						 		    		}]
				 		    			
				 		    			}
				 		    		
				 		    		]
									},	
			 		    		
									////////// graph/////////	
									
					 	               {
					 	                   xtype: 'carousel',
					 	                   height: 430,
						 	         		width: '100%',
	
					 	                   defaults: {
					 	           				styleHtmlContent: true	
					 	           			},

							 	           items: [
							 	                  {
							 	                	   xtype: 'container',
							 	                	   layout: 'fit',
							 	                	   items: [
											 	                  {
																		
																		xtype: 'chart',
																		background: 'white',
																		width: '100%',
																		height: 400,
															            animate: true,
															            store: storeDays,
															            legend: {
															            	position : 'top',
															            },
															            axes: [{
																                type: 'numeric',
																                position: 'left',
																                fields: ['data1','data2'],
																                title: {
																                    text: '電力量(Wh)',
																                    fontSize: 15
																                },
																                grid: {
																                    odd: {
																                        opacity: 0.25,
																                        fill: '#ddd',
																                        stroke: '#bbb',
																                        'stroke-width': 0.5
																                    }
																                },
																                minimum: 0
																	       		 }, 
				
																	       			 {
																	                type: 'category',
																	                position: 'bottom',
																	                fields: ['name'],
																	                title: {
																	                    text: '日',
																	                    fontSize: 15
																	                }
																	         }],
																	            
																	    series: [{
																	                type: 'bar',
																	                highlight: {
																	                    size: 7,
																	                    radius: 7
																	                },
																	                style: {
																	                     fillStyle: '#F0A50A'
																	                },
																					fill: true,
																	                xField: 'name',
																	                yField: 'data1',
																	                title : ['対象月'],
																	               
																	            }, {
																	                type: 'line',
																	                highlight: {
																	                    size: 7,
																	                    radius: 7
																	                },
																	                style: {
																	                    stroke: '#C20024'
																	                },
																					markerConfig: {
																	                    type: 'circle',
																						size: 1,
																						radius: 1,
																						stroke: '#C20024',
																						'stroke-width': 1
																	                },
																					fill: false,
																					smooth: true,
																	                xField: 'name',
																	                yField: 'data2',
																	                title : '比較月',
																	               
																	            }]
																	},
															]
							 	                		},
													   {
																				
														xtype: 'fieldset',
														id: 'DayTableView',
													 	layout: {
											                type: 'hbox',
											               pack: 'start', 
											               align: 'middle'
											            },
														items: [
														        {
														        	xtype: 'panel',
																	width: '33%',
																	height : '100%',
																	styleHtmlContent: true,
																	html: [ generateHtmlDaysTable(storeDays,0,10)],
														        },
														        {
														        	xtype: 'panel',
																	width: '33%',
																	height : '100%',
																	styleHtmlContent: true,
																	html: [ generateHtmlDaysTable(storeDays,10,20)],
														        },
														        {
														        	xtype: 'panel',
																	width: '33%',
																	height : '100%',
																	styleHtmlContent: true,
																	html: [ generateHtmlDaysTable(storeDays,20,-1)],
														        }
																]
													
								 	                }, 
					 	     				]
					 	      		 },
				                ]},
				                
// *************************************************** Year View *******************************************************			 	                

				           	{
				                title: '年',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										document.location.href = "yearView.html"
										}
									}
				           	},

//************************************** Statistic View *********************************************************************************************

				            {
				                title: '統計',
				              	iconCls: 'chart',
				              	styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										document.location.href = "statisticView.html"
									}
								},
				 		    } 
					        
					]
				});
			}
		});
	</script>
 </head>
 <body>
 </body>
</html>
				 		       